<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<script type="text/javascript" src="../../jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="datagrid-detailview.js"></script>
	<script>
		$(function(){
			$('#tt').datagrid({
				title:'DataGrid - DetailView',
				width:500,
				height:250,
				remoteSort:false,
				singleSelect:true,
				nowrap:false,
				fitColumns:true,
				url:'datagrid_data.json',
				columns:[[
					{field:'itemid',title:'Item ID',width:80},
					{field:'productid',title:'Product ID',width:100,sortable:true},
					{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
					{field:'attr1',title:'Attribute',width:150,sortable:true},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				view: detailview,
				detailFormatter: function(rowIndex, rowData){
					return '<table><tr>' +
							'<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
							'<td style="border:0">' +
							'<p>Attribute: ' + rowData.attr1 + '</p>' +
							'<p>Status: ' + rowData.status + '</p>' +
							'</td>' +
							'</tr></table>';
				}
			});
		});
	</script>
</head>
<body>
	<h1>DataGrid - DetailView</h1>
	
	<table id="tt"></table>
</body>
</html>